import React, { useState } from 'react';
import { Col, Collapse, Input, List, Row } from 'antd';
import { CaretRightOutlined, DownCircleOutlined, UpCircleOutlined } from '@ant-design/icons';
import { NodeListConfig } from '@/constant';
import styled from 'styled-components';
import './style.less';
import { DraggableNode } from './DraggableNode';
import useDesignerStore from '@/store/Designer';
import { BaseNodeContent } from '../CustomNode/BaseNode';

const ASide = styled.aside`
  user-select: none;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  height: 100%;
`

const SCollapse = styled(Collapse)`
  user-select: none;
  height: 100%;
`;

export default () => {
  const [hiddenPanel, setHiddenPanel] = useState(false);
  const { setDragNode } = useDesignerStore();

  const onDragStart = (event, node) => {
    setDragNode({ label: node?.label, type: node?.value });
    event.dataTransfer.effectAllowed = 'move';
  };


  const dragNodeList = NodeListConfig?.map((group) => {
    return {
      key: group.key,
      label: group.title,
      children: (
        <List dataSource={group.children} renderItem={(node) => {
          return (
            <DraggableNode
              key={node.value}
              className={["dndnode", node.value].join(' ')}
              onDragStart={(event) => onDragStart(event, node)}
              draggable
              initial={{ opacity: 0, x: -20 }} // 初始状态：透明且向下偏移
              whileInView={{ opacity: 1, x: 0 }} // 进入视口时：完全不透明且回到原位
              transition={{ duration: 0.2, delay: 0.2 }} // 每个元素延迟 0.2 秒显现
              viewport={{ once: true, margin: "0px -20px" }} // 调整视口触发区域
            // whileHover={{ scale: 1.05, transition: { duration: 0.1 ,delay: 0} }} // 鼠标悬停时放大
            // whileTap={{scale: 0.9, }}
            >
              <BaseNodeContent type={node.value} label={node.label} style={{ gap: 20 }} />
            </DraggableNode>
          )
        }} />
      ),
    }
  })

  const switchPanel = () => {
    setHiddenPanel(!hiddenPanel);
  };

  const onSearch = () => {
    setHiddenPanel(false);
  };


  return (
    <ASide className="aside">
      <Input.Search placeholder="在此搜索" onFocus={() => setHiddenPanel(false)} onSearch={onSearch} />
      <div className='node-list'>
        {hiddenPanel ? null : (
          <SCollapse
            bordered={false}
            defaultActiveKey={dragNodeList?.map((n => n.key))}
            expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}
            items={dragNodeList}
          />
        )}
      </div>
      <div className="close-panel-btn">
        {hiddenPanel ? (
          <DownCircleOutlined onClick={switchPanel} />
        ) : (
          <UpCircleOutlined onClick={switchPanel} />
        )}
      </div>
    </ASide>
  );
};